<dom-module id="tag-link">
    <template>
        <style>
        :host,
        a {
            display: inline-block;
            cursor: pointer;
            color: #606060;
        }
        
        :host(:hover) span {
            text-decoration: underline;
        }
        
        span {
            font-size: 12px;
            font-weight: 500;
            color: var(--primary-text-color);
            text-decoration: none;
        }
        </style>
        <span>{{name}}</span>
    </template>
</dom-module>
<script>
Polymer({
    is: 'tag-link',
    enableCustomStyleProperties: true,
    properties: {
        name: {
            type: String,
            notify: true,
            reflectToAttribute: true,
            observer: 'convert'
        }
    },
    convert: function() {
        if (typeof this.name === 'object') {
            this.name = this.name.valueOf();
        }
    }
});
</script>
